<template>
	<view class="content">
		<view class="uniFlex title">
			<img src="../../static/bg/wzf/a2.png" alt="">
			<view>核验项目</view>
		</view>
		
		<view v-for="(item,index) in list" :key="index" style="border-bottom: 1px solid #FBF8F9;">
			<view class="uniFlex2 boxes">
				<view>治疗名称：</view>
				<view>{{item.title}}（总:{{item.num3}}/已占用:{{item.num4}}）</view>
			</view>
			<view v-if="item.num3 == item.num4">
				<view class="uniFlex2 boxes">
					<view>当前试用次数：</view>
					<view>无</view>
				</view>
				<view class="uniFlex2 boxes">
					<view>执行人：</view>
					<view>无</view>
				</view>
			</view>
			<view v-else>
				<view class="uniFlex2 boxes">
					<view>当前试用次数：</view>
					<view>
						<input @blur="blur(index)" v-model="item.numbers" placeholder-class="pcs" placeholder="请输入正整数" type="number">
					</view>
				</view>
				<view class="uniFlex2 boxes">
					<view>执行人：</view>
					<view>
						<picker style="flex:1;" @change="bindPickerChangeArray($event,index)" :value="item.index" :range="array"
							range-key="name">
							<view class="uniBtn">
								<view v-if="item.personname">{{item.personname}}</view>
								<view v-else>请选择</view>
								<img src="../../static/bg/icons.png" alt="">
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="uniFlex2 boxes">
			<view>备注：</view>
			<view>
				<textarea style="height: 200upx;width: 420upx;" v-model="remarks" maxlength="-1" placeholder="请输入备注" placeholder-class="pcs2"></textarea>
			</view>
		</view>
		
		<view class="btnStyle" @click="submit">立即核验</view>
	</view>
</template>

<script>
	import {
		wzfread,wzfuser,wzfverify
	} from '@/request/api.js'
	export default {
		data() {
			return {
				id:'',
				list: [],
				array:[],
				remarks:''
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getDetail(option.id);
			wzfuser().then(res => {
				this.array = res.data;
			})
		},
		methods: {
			// 试用次数
			blur(index){
				let value = this.list[index].numbers;
				if(!value){
					this.list[index].numbers = 1;
				}
			},
			// 列表
			getDetail(id) {
				wzfread({
					id:id
				}).then(res => {
					res.data.item.forEach(item=>{
						if(item.num3 == item.num4){
							item.numbers = 0;
						}else{
							item.numbers = 1;
						}
						item.personid = '';
						item.personname = '';
					})
					this.list = res.data.item;
				})
			},
			bindPickerChangeArray(e,index){
				let id = this.array[e.target.value].id;
				let name = this.array[e.target.value].name;
				this.list[index].personid = id;
				this.list[index].personname = name;
			},
			submit(){
				let items = []
				this.list.forEach(item=>{
					let str = {id:item.id,numbers:item.numbers,personid:item.personid};
					items.push(str)
				})
				let param = {
					id:this.id,
					data:JSON.stringify(items),
					remark:this.remarks
				}
				uni.showLoading({
					mask:true
				})
				wzfverify(param).then(res => {
					uni.hideLoading()
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					setTimeout(function(){
						uni.navigateBack()
					},800)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 35upx;
		font-size: 28upx;
		box-sizing: border-box;
		
		.title{
			padding: 20upx 0;
			border-bottom: 1px solid #FBF8F9;
			font-weight: bold;
			
			img{
				width: 47upx;
				height: 47upx;
				margin-right: 16upx;
			}
		}
		
		.boxes{
			padding: 20upx 0;
			
			view:first-child{
				width: 220upx;
			}
			view:last-child{
				flex: 1;
				
				.uniBtn{
					width: 100%;
					img{
						width: 35upx;
						height: 35upx;
					}
				}
			}
		}
		.btnStyle{
			margin-top: 70upx;
		}
	}
</style>
